<!-- 项目审批 -->
<template>
	<view >
<cu-custom bgColor="bg-blue2" :isBack="true" @back="backedPage"><block slot="backText">返回</block><block slot="content">出库码单编辑</block></cu-custom>
		
		<view >
		
		<view style="margin-top: 50px;" class='cu-btn bg-blue2 lg block shadow radius margin-xl selectStack' @tap="showModal" data-target="viewModal">
			选择库存码单
		</view>

		<form @submit="onSubmit">
			<view class="cu-form-group">
				<view class="title">堆号</view>
				<input v-model="item.heapNum" name="input" disabled="disabled"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">层号</view>
				<input v-model="item.layerNum" name="input" disabled="disabled"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">码单号</view>
				<input v-model="item.stackNum" name="input" disabled="disabled"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">规格</view>
				<input v-model="item.spec" name="input" disabled="disabled"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">卷号</view>
				<input v-model="item.innerBatch" name="input" disabled="disabled"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">库存数量</view>
				<input v-model="item.stockQty" name="input" disabled="disabled"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">库存重量</view>
				<input v-model="item.stockWeight" name="input" disabled="disabled"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">应发数量</view>
				<input v-model="item.inQty" name="input" disabled="disabled"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">应发重量</view>
				<input v-model="item.inWeight" name="input" disabled="disabled"></input>
			</view>
			<view class="cu-form-group">
				<view class="title xrequired">实发数量</view>
				<input :class="!item.qty ? 'xrwaning' : ''" v-model="item.qty" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title xrequired">实发重量</view>
				<input :class="!item.weight ? 'xrwaning' : ''" v-model="item.weight" name="input"></input>
			</view>
			<view>
				<button form-type="submit" class="cu-btn block bg-blue margin-tb-sm lg" :disabled="loading" type="">
					<text :class="loading ? 'cuIcon-loading2 cuIconfont-spin' : ''"></text>保存</button>
			</view>
		</form>
		<view class="cu-modal drawer-modal justify-start" :class="isShowStackDialog ?'show':''">
			<view class="cu-dialog basis-lg" >
				<uni-nav-bar :fixed="true" color="#333333" background-color="#4364F7" :border="false">
					<view class="input-view">
						<uni-icons type="search" size="22" color="#666666" />
						<input v-model="searchVal" confirm-type="search" class="input" type="text" placeholder="批次" @confirm="search">
						<uni-icons :color="'#999999'" v-if="searchVal!==''" class="icon-clear" type="clear" size="22" @click="clear" />
					</view>
					<!-- <uni-search-bar style="width: 100%;" placeholder="搜索项目/机构" radius="100" clearButton="auto" @confirm="search" /> -->
				</uni-nav-bar>
				<scroll-view scroll-y="true">
					<view class="mycard">
						<view v-for="(item,index) in cardList" :key="index" class="card-item">
							<uni-card is-full title="库存码单" is-shadow note="true">
								<view class="audit-card-content">
									<view class="uni-flex uni-row">
										<view class="flex-item-30">堆号</view>
										<view class="flex-item-70">{{item.heapNum}}</view>
									</view>
									<view class="uni-flex uni-row">
										<view class="flex-item-30">层号</view>
										<view class="flex-item-70">{{item.layerNum}}</view>
									</view>
									<view class="uni-flex uni-row">
										<view class="flex-item-30">码单号</view>
										<view class="flex-item-70">{{item.stackNum}}</view>
									</view>
									<view class="uni-flex uni-row">
										<view class="flex-item-30">规格</view>
										<view class="flex-item-70">{{item.spec}}</view>
									</view>
									<view class="uni-flex uni-row">
										<view class="flex-item-30">库存数量</view>
										<view class="flex-item-70">{{item.qty}}</view>
									</view>
									<view class="uni-flex uni-row">
										<view class="flex-item-30">库存重量</view>
										<view class="flex-item-70">{{item.weight}}</view>
									</view>
									<view class="uni-flex uni-row">
										<view class="flex-item-30">应发数量</view>
										<view class="flex-item-70">{{item.inQty}}</view>
									</view>
									<view class="uni-flex uni-row">
										<view class="flex-item-30">应发重量</view>
										<view class="flex-item-70">{{item.inWeight}}</view>
									</view>
									<view class="uni-flex uni-row">
										<view class="flex-item-30">卷号</view>
										<view class="flex-item-70">{{item.innerBatch}}</view>
									</view>						
									<view class="uni-flex uni-row">
										<view class="flex-item-30">备注</view>
										<view class="flex-item-70">{{item.remark}}</view>
									</view>		
								</view>
				
								<template v-slot:footer>
									<view class="footer-box">
										<view class="iconfont my-iconfont text-green"></view>
										<view class="iconfont my-iconfont text-red"></view>
										<view class="cuIcon-check text-blue" @tap="selectedClick(index)">选择</view>
									</view>
								</template>
							</uni-card>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniCombox from '@/components/uni-combox/uni-combox.vue'
	import selectStack from './selectStack.vue'

	import {
		mapGetters
	} from 'vuex'
	import {
		getRandomArrayElements,
		filePreview,
		formatStatus
	} from '@/utils/index.js'
	import { formatDate } from '@/utils/datetime.js'
	export default {
		components: {
			uniTag,
			uniIcons,
			uniCombox,
			selectStack
		},
		computed: mapGetters(['user']),
		data() {
			return {
				item: {},
				goodsOutBillId:0,
				detailId: 0,
				stackId:0,
				loading: false,
				isShowStackDialog: false,
				cardList: [],
				datas:[],
				searchVal: ''
			}
		},
		onLoad(options) {
			this.goodsOutBillId = options.goodsOutBillId
			this.detailId = options.detailId
			this.stackId = options.stackId
			if (this.detailId >0 && this.stackId > 0) {
				this.$minApi.getGoodsOutStack(this.stackId).then(res => {

					const data = res
					if (data) {
						this.item = data
					}
				}).catch(err => {
					console.log(err)
				}).finally(() => {
				})
			} else {
				uni.setNavigationBarTitle({
				title: '新增出库码单'
				})
			}
			
			const params = {
				billId: this.goodsOutBillId,
				detailId: this.detailId
			  }
			this.$minApi.getInStockGoodsStacks(params).then(res => {
			
				const data = res
				if (data) {					
					this.cardList = data
					this.datas = data
				}
			}).catch(err => {
				console.log(err)
			}).finally(() => {
			
			})
		},
		methods: {
			filePreview,
			formatStatus,
			formatDate,
			onSubmit(e) {  
				
				if(!this.item.qty || !this.item.weight) {
					uni.showToast({
						icon: 'none',
					    title: '必填项未填写',
					    duration: 2000
					})
					return
				}
				
				this.loading = true
				const _this = this
				
				this.item.qty = Number(this.item.qty)
				this.item.weight = Number(this.item.weight)
				this.item.isResidue = '否'
				this.item.goodsOutDetailId = Number(this.detailId)
				this.item.inStockGoodsStackID = Number(this.item.inStockGoodsStackID)
				if (this.stackId > 0) {

					_this.$minApi.updateGoodsOutStack(this.item.id, this.item).then(res => {
						uni.showToast({
						    title: '修改成功',
						    duration: 2000
						})
						
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/todo/goodsOutBill/stack?goodsOutBillId=${this.goodsOutBillId}&detailId=${this.detailId}&stackId=0`
							})
						}, 2000)

					}).catch(err => {
						uni.showToast({
							icon: 'none',
						    title: '修改失败',
						    duration: 2000
						})
						console.log(err)
					}).finally(() => {
						this.loading = false
					})
				} else {
					
					_this.$minApi.createGoodsOutStack(this.item).then(res => {
						uni.showToast({
						    title: '添加成功',
						    duration: 2000
						})
						
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/todo/goodsOutBill/stack?goodsOutBillId=${this.goodsOutBillId}&detailId=${this.detailId}&stackId=0`
							})
						}, 2000)
					}).catch(err => {
						uni.showToast({
							icon: 'none',
						    title: '添加失败',
						    duration: 2000
						})
						console.log(err)
					}).finally(() => {
						this.loading = false
					})
				}
				
			},
			showModal() {
				this.isShowStackDialog = true
			},
			viewModal(val) {
				this.isShowStackDialog = false
					
				if (val) {
				
					this.item.heapNum = val.heapNum
					this.item.layerNum = val.layerNum
					this.item.stackNum = val.stackNum		
					this.item.spec = val.spec		
					this.item.innerBatch = val.innerBatch						
					this.item.inStockGoodsStack.qty = val.qty				
					this.item.inStockGoodsStack.weight = val.weight							
					this.item.goodsOutDetail.qty = val.inQty								
					this.item.goodsOutDetail.weight = val.inWeight								
					this.item.qty = 0	
					this.item.weight = 0	
					
				}
				
			},
			hideModal(e) {
				this.isShowStackDialog = false
			},
			selectedClick(index) {
				const val = this.cardList[index]
				this.isShowStackDialog = false
				if (val) {
					
					this.item.inStockGoodsStackID = val.inStockGoodsStackID		
					this.item.heapNum = val.heapNum
					this.item.layerNum = val.layerNum
					this.item.stackNum = val.stackNum		
					this.item.spec = val.spec		
					this.item.innerBatch = val.innerBatch						
					this.item.stockQty = val.qty				
					this.item.stockWeight = val.weight							
					this.item.inQty = val.inQty								
					this.item.inWeight = val.inWeight								
					this.item.qty = 0	
					this.item.weight = 0	
					
				}
			},
			search() {
				if (this.searchVal) {
					this.cardList = this.datas.filter(f => f.innerBatch === this.searchVal)
				} else {
					this.cardList = this.datas
				}				
			},
			clear() {
				this.searchVal = ''
				this.search()
			},
			backedPage() {
				uni.redirectTo({
					url: `/pages/todo/goodsOutBill/stack?goodsOutBillId=${this.goodsOutBillId}&detailId=${this.detailId}&stackId=0`
				})
			}
		}
	}
</script>

<style>
	.selectStack {
		position: fixed;
		top: 55px;
		right: 2px;
		z-index: 9;
	}
	.xrequired::after  {
		content: '*';
		color: red;
	}
	.xrwaning{
		border: 1px solid #FF0000;
	}
	/deep/ .xrequiredCombox .uni-combox__label span::after  {
		content: '*';
		color: red;
	}
	/deep/ .xrequiredCombox .uni-combox__label text::after  {
		content: '*';
		color: red;
	}
	/deep/.xrwaningCombox input{
		border: 1px solid #FF0000;
	}
</style>
